<template>
  <div class="app-container index">
    <el-card shadow="never" style="margin-bottom: 15px; radius: 10px">
      <el-row>
        <el-col :span="5">
          <img
            src="@/assets/images/MonitorLight.png"
            alt=""
            style="width: 66px; height: 66px; margin-right: 10px; float: left"
          />
          <span v-for="(value, key) in TjCountTop" :key="key">
            <span
              v-if="key === '告警总数'"
              style="display: flex; flex-direction: column"
            >
              <span class="TjCountTopName">{{ key }}</span>
              <span class="TjCountTopCount">&nbsp; {{ value }}</span>
            </span>
          </span>
        </el-col>
        <el-col :span="3">
          <span v-for="(value, key) in TjCountTop" :key="key">
            <span
              v-if="key === '告警处理超时数'"
              style="display: flex; flex-direction: column"
            >
              <span class="TjCountTopName">{{ key }}</span>
              <span class="TjCountTopCount">&nbsp; {{ value }}</span>
            </span>
          </span>
        </el-col>

        <el-col
          :span="16"
          style="
            display: flex;
            justify-content: space-around;
            align-items: center;
          "
        >
          <span v-for="(value, key) in TjCountTop" :key="key">
            <span
              v-if="key !== '告警总数总数' && key !== '告警处理超时数'"
              style="display: flex"
            >
              <span style="display: flex; align-items: center">
                <span class="TjCountTopName">{{ key }}</span>
                <span class="TjCountTopCount">&nbsp; {{ value }}</span>
              </span>
            </span>
          </span>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="12">
        <Card title="报警次数统计" style="margin-bottom: 20px" height="400px">
          <template #subTitle>
            <div style="height: 45px">
              <el-date-picker
                v-model="bySysBarMultiDate"
                type="daterange"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="countByMonitorTypeChange"
                style="line-height: 45px !important"
              />
              <el-button
                @click="CountByMonitorTypeReset"
                style="line-height: 45px; margin-top: -7px"
                >重置</el-button
              >
            </div>
          </template>
          <template #default>
            <el-row>
              <el-col :span="24" style="">
                <Bar2Multi ref="bySysBarMulti"></Bar2Multi>
              </el-col>
            </el-row>
          </template>
        </Card>
      </el-col>
      <el-col :span="12">
        <Card title="报警数目分布" style="margin-bottom: 20px" height="400px">
          <template #subTitle>
            <div style="height: 45px">
              <el-select
                v-model="bySysPieSel"
                value-key=""
                placeholder=""
                clearable
                filterable
                @change="countByStateAndMonitorTypeChange"
              >
                <el-option
                  v-for="item in bySysPieSelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-date-picker
                v-model="bySysPieDate"
                type="daterange"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="countByStateAndMonitorTypeChange"
                style="line-height: 45px !important"
              />
              <el-button
                @click="countByStateAndMonitorTypeReset"
                style="line-height: 45px; margin-top: -7px"
                >重置</el-button
              >
            </div>
          </template>
          <template #default>
            <el-row>
              <el-col :span="24">
                <Bar3pie ref="bySysPie"></Bar3pie>
              </el-col>
            </el-row>
          </template>
        </Card>
      </el-col>
      <el-col :span="24">
        <Card
          title="报警数目趋势统计"
          style="margin-bottom: 20px"
          height="400px"
        >
          <template #subTitle>
            <div style="height: 45px">
              <el-select
                v-model="bySysLineSel"
                value-key=""
                placeholder=""
                clearable
                filterable
                @change="countByMonthChange"
              >
                <el-option
                  v-for="item in bySysLineSelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-date-picker
                v-model="bySysLineDate"
                type="year"
                format="YYYY [年]"
                value-format="YYYY"
                @change="countByMonthChange"
                style="line-height: 45px !important"
              />
              <el-button
                @click="countByMonthReset"
                style="line-height: 45px; margin-top: -7px"
                >重置</el-button
              >
            </div>
          </template>
          <template #default>
            <el-row>
              <el-col :span="24">
                <Bar2Multi ref="bySysLine"></Bar2Multi>
              </el-col>
            </el-row>
          </template>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Card from "./components/Card.vue";
import Bar2Vue from "./components/Bar2.vue";
import Bar2Multi from "./components/Bar2Multi.vue";
import Bar3pie from "./components/Bar3pie.vue";

import { deptTreeSelect } from "@/api/system/user";
import {
  apis as APIS,
  countByType,
  countTop,
} from "@/api/hdwarning/immediate.js";

// const zdwxy = ref();
// const krydqt = ref();
// const alarmList = ref();
// const sysFirePointList = ref();
// const tjDate = ref([]);

const TjCountTop = ref();
const bySysBarMulti = ref([]);
const bySysBarMultiDate = ref([]);
const bySysPie = ref([]);
const bySysPieDate = ref([]);
const bySysPieSel = ref("全部");
const bySysPieSelOptions = ref([
  { label: "全部", value: "全部" },
  { label: "重大危险源", value: "重大危险源" },
  { label: "可燃气体", value: "可燃气体" },
  { label: "生产数据", value: "生产数据" },
  { label: "火灾报警", value: "火灾报警" },
]);
const bySysLine = ref([]);
const bySysLineDate = ref(new Date().getFullYear() + "");
const bySysLineSel = ref("全部");
const bySysLineSelOptions = ref([
  { label: "全部", value: "全部" },
  { label: "重大危险源", value: "重大危险源" },
  { label: "可燃气体", value: "可燃气体" },
  { label: "生产数据", value: "生产数据" },
  { label: "火灾报警", value: "火灾报警" },
]);

const bySysLinexAxisData = [
  "一月",
  "二月",
  "三月",
  "四月",
  "五月",
  "六月",
  "七月",
  "八月",
  "九月",
  "十月",
  "十一月",
  "十二月",
];
const bySysLineLegendData = ["低低报", "低报", "高报", "高高报"];

onMounted(() => {
  init();
  // initData2();
});

const init = () => {
  countTopData();
  countByMonitorTypeChange();
  countByStateAndMonitorTypeChange();
  countByMonthChange();
};

// 0
const countTopData = () => {
  APIS.getTjDataCountTop().then((res) => {
    TjCountTop.value = res.data;
  });
};
// 1
const CountByMonitorTypeReset = () => {
  bySysBarMultiDate.value = [];
  countByMonitorTypeChange();
};
const countByMonitorTypeChange = () => {
  APIS.getXtCountByMonitorType({
    startTime: bySysBarMultiDate.value[0] || null,
    endTime: bySysBarMultiDate.value[1] || null,
  }).then((res) => {
    const xAxisData = [];
    const seriesDataTemp = [[], [], [], []];
    Object.entries(res.data).map((item) => {
      xAxisData.push(item[0]);
      seriesDataTemp[0].push(item[1].ll);
      seriesDataTemp[1].push(item[1].l);
      seriesDataTemp[2].push(item[1].h);
      seriesDataTemp[3].push(item[1].hh);
    });
    const seriesData = [
      {
        name: bySysLineLegendData[0],
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: seriesDataTemp[0],
      },
      {
        name: bySysLineLegendData[1],
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: seriesDataTemp[1],
      },
      {
        name: bySysLineLegendData[2],
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: seriesDataTemp[2],
      },
      {
        name: bySysLineLegendData[3],
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: seriesDataTemp[3],
      },
    ];
    bySysBarMulti.value.setData({
      seriesData: seriesData,
      legendData: bySysLineLegendData,
      xAxisData: xAxisData,
    });
  });
};
// 2
const countByStateAndMonitorTypeReset = () => {
  bySysPieDate.value = [];
  bySysPieSel.value = "全部";
  countByStateAndMonitorTypeChange();
};
const countByStateAndMonitorTypeChange = () => {
  APIS.getCountByStateAndMonitorType({
    startTime: bySysPieDate.value[0] || null,
    endTime: bySysPieDate.value[1] || null,
    monitorType: bySysPieSel.value !== "全部" ? bySysPieSel.value : null,
  }).then((res) => {
    let total = 0;
    const data = Object.entries(res.data).map((item, key) => {
      total += item[1];
      return {
        value: item[1],
        name: item[0],
      };
    });
    bySysPie.value.setData({
      data,
      total,
    });
  });
};
// 3
const countByMonthReset = () => {
  bySysLineDate.value = "";
  bySysLineSel.value = "全部";
  countByMonthChange();
};
const countByMonthChange = () => {
  const ye = bySysLineDate.value ? bySysLineDate.value.split("-") : [];
  APIS.getCountByMonth({
    year: ye[0],
    monitorType: bySysLineSel.value !== "全部" ? bySysLineSel.value : null,
  }).then((res) => {
    const seriesDataTempMonth = [[], [], [], []];
    Object.entries(res.data).map((item) => {
      seriesDataTempMonth[0].push(item[1].ll);
      seriesDataTempMonth[1].push(item[1].l);
      seriesDataTempMonth[2].push(item[1].h);
      seriesDataTempMonth[3].push(item[1].hh);
    });
    const seriesDataMonth = [
      {
        name: bySysLineLegendData[0],
        type: "line",
        emphasis: {
          focus: "series",
        },
        data: seriesDataTempMonth[0],
      },
      {
        name: bySysLineLegendData[1],
        type: "line",
        emphasis: {
          focus: "series",
        },
        data: seriesDataTempMonth[1],
      },
      {
        name: bySysLineLegendData[2],
        type: "line",
        emphasis: {
          focus: "series",
        },
        data: seriesDataTempMonth[2],
      },
      {
        name: bySysLineLegendData[3],
        type: "line",
        emphasis: {
          focus: "series",
        },
        data: seriesDataTempMonth[3],
      },
    ];
    // console.log(seriesDataMonth, bySysLineLegendData, bySysLinexAxisData, '33333 3');
    bySysLine.value.setData({
      seriesData: seriesDataMonth,
      legendData: bySysLineLegendData,
      xAxisData: bySysLinexAxisData,
    });
  });
};

//// old
const initData2 = () => {
  //pie
  // const bySysLineSeriesData = [
  //   {
  //     name: '低低报',
  //     type: 'line',
  //     emphasis: {
  //       focus: 'series'
  //     },
  //     data: [320, 332, 301, 334, 390, 332, 301, 334, 390, 332, 301, 390]
  //   },
  //   {
  //     name: '低报',
  //     type: 'line',
  //     emphasis: {
  //       focus: 'series'
  //     },
  //     data: [220, 182, 301, 334, 390, 332, 191, 234, 290, 123, 56, 288]
  //   },
  //   {
  //     name: '高报',
  //     type: 'line',
  //     emphasis: {
  //       focus: 'series'
  //     },
  //     data: [98, 77, 101, 333, 334, 222, 332, 301, 334, 99, 40, 332, 123]
  //   },
  //   {
  //     name: '高高报',
  //     type: 'line',
  //     emphasis: {
  //       focus: 'series'
  //     },
  //     data: [150, 232, 201, 222, 334, 390, 332, 154, 190, 332, 211, 223]
  //   }
  // ]
  /// old
  // APIS.getTjData({
  //   startTime: tjDate.value[0] || null,
  //   endTime: tjDate.value[1] || null,
  // }).then((res) => {
  //   const { danger, gas } = res.data;
  //   zdwxy.value.setData({
  //     data: danger.byLevel.map((item) => item.count),
  //     yAxis: danger.byLevel.map((item) => item.monitor_level),
  //     title: "重大危险源报警",
  //   });
  //   krydqt.value.setData({
  //     data: gas.byLevel.map((item) => item.count),
  //     yAxis: gas.byLevel.map((item) => item.monitor_level),
  //     type: 'line',
  //     title: "可燃有毒气体报警",
  //   });
  // });
  // APIS.countAlarmByLevel({
  //   startTime: tjDate.value[0] || null,
  //   endTime: tjDate.value[1] || null,
  // }).then((res) => {
  //   const { data } = res;
  //   alarmList.value.setData({
  //     data: data.alarmList.map((item) => item.count),
  //     yAxis: data.alarmList.map((item) => item.name),
  //     title: "电子围栏报警",
  //   });
  //   sysFirePointList.value.setData({
  //     data: data.sysFirePointList.map((item) => item.count),
  //     yAxis: data.sysFirePointList.map((item) => item.name),
  //     title: "安全仪表报警",
  //   });
  // });
};

// const treeData = ref([]);
// onMounted(() => {
//   deptTreeSelect().then((response) => {
//     treeData.value = response.data;
//   });
// });
</script>

<style lang="scss" scoped>
.index {
  // padding: 20px;
  width: 100%;
  // min-height: calc(100vh);
  background-color: #e6ecf1;
}
.mt20 {
  margin-top: 20px;
}
::v-deep .el-card__body {
  background: #007dd6; //007dd6
  color: #fff;
  border-radius: 5px;
  padding: 25px 20px !important;
}
.TjCountTopName {
  line-height: 36px;
  font-weight: 700;
}
.TjCountTopCount {
  color: #ff3d3f;
  font-size: 30px;
  font-weight: 500;
  text-shadow: 0.5px 1px 0.5px #054673;
}
</style>
